<template>
  <div>
    <el-form ref="formRef" label-width="0" :model="form" :rules="rules">
      <div class="danger-notice-form">
        <div class="title">安全环保隐患期限整改通知书</div>
        <div class="row">
          <el-form-item prop="tz_sign_unit" label="">
            <el-input
              style="width: 170px"
              class="spe-input"
              v-model="form.tz_sign_unit"
              :readonly="readonly"
            />
          </el-form-item>
          <span class="row-span">：</span>
        </div>
        <div class="row">
          <el-form-item class="spe-span" prop="tz_check_date" label="">
            <el-date-picker
              style="width: 120px"
              class="spe-input"
              format="YYYY年MM月DD日"
              value-format="YYYY-MM-DD"
              v-model="form.tz_check_date"
              :readonly="readonly"
            />
          </el-form-item>
          <span>四联投资安督办对</span
          ><el-form-item prop="tz_check_area" label="">
            <el-input
              style="width: 135px"
              class="spe-input"
              v-model="form.tz_check_area"
              :readonly="readonly"
            />
          </el-form-item>
          <span>开展了</span>
        </div>
        <div class="row">
          <span>安全环保专项检查工作，发现隐患</span>
          <el-form-item prop="tz_issue_count" label="">
            <el-input
              style="width: 40px"
              class="spe-input"
              v-model="form.tz_issue_count"
              :readonly="readonly || props.dangerList.length > 0"
            />
          </el-form-item>
          <span>项，具体隐患项目如下:</span>
        </div>
        <div
          class="row line-row"
          v-for="(item, index) of form.tz_issue_list"
          :key="index"
        >
          <span>{{ index + 1 }}.</span
          ><el-form-item prop="name" label="">
            <el-input
              style="width: 420px"
              class="spe-input"
              v-model="item.tz_issue_desc"
              :readonly="readonly || props.dangerList.length > 0"
            />
          </el-form-item>
        </div>
        <div class="row">
          <span class="spe-span">为确保安全，请立即组织整改以上</span
          ><el-form-item prop="tz_issue_count" label="">
            <el-input
              style="width: 40px"
              class="spe-input"
              v-model="form.tz_issue_count"
              :readonly="true" /></el-form-item
          ><span>项安全环保隐患问题，并于</span>
        </div>
        <div class="row">
          <el-form-item prop="tz_repair_date" label="">
            <el-date-picker
              style="width: 113px"
              class="spe-input"
              format="YYYY年MM月DD日"
              value-format="YYYY-MM-DD"
              v-model="form.tz_repair_date"
              :readonly="readonly"
            />
          </el-form-item>
          <span
            >，前将带有<span style="font-weight: 500"
              >整改结果、照片和整改确认人签字的整改回</span
            ></span
          >
        </div>
        <div class="row">
          <span
            ><span style="font-weight: 500">执报告</span
            >报送至四联投资安督办，后续我方将进行对以上隐患问题整改情况进行复查，<span
              style="font-weight: 500"
              >对于不符合项将按照相关制度进行严肃处理。</span
            ></span
          >
        </div>
        <div class="row" style="margin-top: 20px">
          <span>签收单位：</span>
          <el-form-item prop="tz_sign_unit" label="">
            <el-input
              style="width: 170px"
              class="spe-input"
              v-model="form.tz_sign_unit"
              :readonly="true"
            />
          </el-form-item>
        </div>
        <div class="row">
          <span>签收人：</span>
          <el-form-item prop="tz_receive_user" label="">
            <el-input
              style="width: 170px"
              class="spe-input"
              v-model="form.tz_receive_user"
              :readonly="true"
            />
          </el-form-item>
        </div>
        <div class="row row-right" style="margin-top: 100px">
          <span>重庆四联投资管理有限公司</span>
        </div>
        <div class="row row-right">
          <el-form-item prop="tz_publish_date" label="">
            <el-date-picker
              style="width: 120px"
              class="spe-input"
              format="YYYY年MM月DD日"
              value-format="YYYY-MM-DD"
              v-model="form.tz_publish_date"
              :readonly="readonly"
            />
          </el-form-item>
        </div>
        <div class="sign" v-if="signatureFileUrl">
          <el-image
            class="sign-img"
            fit="cover"
            :initial-index="0"
            :preview-src-list="[signatureFileUrl]"
            preview-teleported
            :src="signatureFileUrl"
          />
        </div>
      </div>
      <div class="danger-notice-form">
        <div class="title">安全环保隐患检查情况记录</div>
        <div class="row">
          <el-form-item prop="jc_unit_name" label="">
            <el-input
              style="width: 170px"
              class="spe-input"
              v-model="form.jc_unit_name"
              :readonly="readonly"
            />
          </el-form-item>
          <span class="row-span">：</span>
        </div>
        <div class="row">
          <el-form-item class="spe-span" prop="jc_check_date" label="">
            <el-date-picker
              style="width: 120px"
              class="spe-input"
              format="YYYY年MM月DD日"
              value-format="YYYY-MM-DD"
              v-model="form.jc_check_date"
              :readonly="readonly"
            />
          </el-form-item>
          <span>，重庆四联投资管理公司对</span
          ><el-form-item prop="jc_unit_name" label="">
            <el-input
              style="width: 130px"
              class="spe-input"
              v-model="form.jc_unit_name"
              :readonly="true"
            />
          </el-form-item>
        </div>
        <div class="row">
          <span>(贵司)进行安全环保相关检查，单位主要负责人为</span>
          <el-form-item prop="jc_unit_leader" label="">
            <el-input
              style="width: 100px"
              class="spe-input"
              v-model="form.jc_unit_leader"
              :readonly="readonly"
            />
          </el-form-item>
          <span>，具体</span>
        </div>
        <div class="row">
          <span>检查项目如下:</span>
        </div>
        <div
          class="row line-row"
          v-for="(item, index) of form.jc_issue_list"
          :key="index"
        >
          <span>{{ index + 1 }}.</span
          ><el-form-item prop="jc_issue_desc" label="">
            <el-input
              style="width: 420px"
              class="spe-input"
              v-model="item.jc_issue_desc"
              :readonly="readonly || props.dangerList.length > 0"
            />
          </el-form-item>
        </div>
        <div class="row">
          <span class="spe-span"
            >为确保安全，请贵司严格履行企业安全生产主体责任要求，保障安全</span
          >
        </div>
        <div class="row">
          <span class="span"
            >生产持续发展，对于不符合项积极整改，保障企业生产安全。</span
          >
        </div>
        <div class="row" style="margin-top: 40px">
          <span>被检查单位：</span>
          <el-form-item prop="jc_unit_name" label="">
            <el-input
              style="width: 170px"
              class="spe-input"
              v-model="form.jc_unit_name"
              :readonly="true"
            />
          </el-form-item>
        </div>
        <div class="row">
          <span>被检查单位现场负责人：</span>
          <el-form-item prop="jc_unit_leader" label="">
            <el-input
              style="width: 170px"
              class="spe-input"
              v-model="form.jc_unit_leader"
              :readonly="true"
            />
          </el-form-item>
        </div>
        <div class="row row-right" style="margin-top: 100px">
          <span>重庆四联投资管理有限公司</span>
        </div>
        <div class="row row-right">
          <el-form-item prop="jc_publish_date" label="">
            <el-date-picker
              style="width: 120px"
              class="spe-input"
              format="YYYY年MM月DD日"
              value-format="YYYY-MM-DD"
              v-model="form.jc_publish_date"
              :readonly="readonly"
            />
          </el-form-item>
        </div>
        <div class="sign" v-if="signatureFileUrl">
          <el-image
            class="sign-img"
            fit="cover"
            :initial-index="0"
            :preview-src-list="[signatureFileUrl]"
            preview-teleported
            :src="signatureFileUrl"
          />
        </div>
      </div>
    </el-form>
  </div>
</template>
<script setup>
import { ref, watch } from 'vue'

const props = defineProps({
  readonly: {
    type: Boolean,
    default: false,
  },
  detail: {
    type: String,
    default: '',
  },
  unitNames: {
    type: String,
    default: '',
  },
  userNames: {
    type: String,
    default: '',
  },
  dangerList: {
    type: Array,
    default: () => [],
  },
  signatureFileUrl: {
    type: String,
    default: '',
  },
})
const formRef = ref()
const form = ref({
  tz_issue_list: [
    {
      tz_issue_desc: '',
    },
    {
      tz_issue_desc: '',
    },
    {
      tz_issue_desc: '',
    },
    {
      tz_issue_desc: '',
    },
    {
      tz_issue_desc: '',
    },
  ],
  jc_issue_list: [
    { jc_issue_desc: '' },
    { jc_issue_desc: '' },
    { jc_issue_desc: '' },
    { jc_issue_desc: '' },
    { jc_issue_desc: '' },
  ],
})
watch(
  () => props.detail,
  () => {
    if (props.detail) {
      form.value = JSON.parse(props.detail)
    }
  },
  {
    immediate: true,
  },
)
watch(
  () => props.unitNames,
  () => {
    form.value.tz_sign_unit = props.unitNames
    form.value.jc_unit_name = props.unitNames
  },
)
watch(
  () => props.userNames,
  () => {
    form.value.tz_receive_user = props.userNames
    form.value.jc_unit_leader = props.userNames
  },
)
watch(
  () => props.dangerList,
  () => {
    form.value.tz_issue_list = []
    form.value.jc_issue_list = []
    for (let i = 0; i < props.dangerList.length; ++i) {
      form.value.tz_issue_list.push({ tz_issue_desc: props.dangerList[i] })
      form.value.jc_issue_list.push({ jc_issue_desc: props.dangerList[i] })
    }
    form.value.tz_issue_count = props.dangerList.length
  },
)
defineExpose({ form })
const rules = ref({})
</script>
<style lang="scss" scoped>
.danger-notice-form {
  width: 550px;
  height: 600px;
  box-shadow: 0px 0px 10px 0 rgba(72, 121, 238, 0.1);
  box-sizing: border-box;
  padding: 20px 50px;
  margin-bottom: 20px;
  position: relative;
  .title {
    width: 100%;
    display: flex;
    justify-content: center;
    margin-bottom: 20px;
    font-size: 16px;
    font-weight: 500;
  }
  .row {
    display: flex;
    align-items: flex-end;
    justify-content: flex-start;
    margin: 5px 0;
    span {
      display: inline-block;
      font-size: 14px;
      line-height: 20px;
    }
  }
  .line-row {
    span {
      margin-right: 5px;
    }
  }
  .row-right {
    width: 100%;
    justify-content: flex-end;
  }
}
.spe-span {
  margin-left: 30px;
}
:deep(.el-form-item) {
  margin-bottom: 0 !important;
}
:deep(.el-date-editor) {
  height: auto !important;
}
:deep(.spe-input) {
  .el-input__wrapper {
    box-shadow: none !important;
    padding: 0 2px;
    height: 20px;
    background-color: #f7f7f7;
    border-radius: 0;
    .el-input__prefix {
      display: none;
    }
    .el-input__suffix {
      display: none;
    }
    .el-input__inner {
      line-height: 20px;
      height: 20px;
      color: #000;
    }
  }
  border-bottom: 1px solid #000;
}
.sign {
  position: absolute;
  bottom: 50px;
  width: 150px;
  height: 50px;
  &-img {
    width: 100%;
    height: 100%;
  }
}
</style>
